import React from 'react';
import styles from './styles.module.less';
import {Button, Col, Divider, Row} from "antd";

const Invited = () => {

    const gotoRegister = () => {
        const currentPath = window.location.href;
        window.location.href = currentPath.replace("invite","home");
    };

    return (
        <div className={styles.home_box}>
            <div className={styles.banner} style={{backgroundImage: `url('/img/invited.png')`}}>
                <div className={styles.tips}>
                    <span className={styles.tips_text}>免费领解决方案平台会员</span>
                </div>
                <div className={styles.desc}>
                    <span>您的好友邀请您领取会员啦！</span>
                </div>
            </div>

            <div style={{width: '80%'}}>
                <div className={styles.desc}>领取步骤</div>
                <div>
                    <Row>
                        <Col span={5}>
                            <Row>
                                <span className={`${styles.desc_buZhou}`}>1</span>
                            </Row>
                            <Row>
                                <span className={`${styles.desc_buZhou}`}>注册平台账户</span>
                            </Row>
                        </Col>
                        <Col span={5}>
                            <Row>
                                <span className={`${styles.tips_text} ${styles.desc_buZhou}`}>></span>
                            </Row>
                            <Row>
                            </Row>
                        </Col>
                        <Col span={5}>
                            <Row>
                                <span className={`${styles.desc_buZhou}`}>2</span>
                            </Row>
                            <Row>
                                <span className={`${styles.desc_buZhou}`}>完成一次对话</span>
                            </Row>
                        </Col>
                        <Col span={5}>
                            <Row>
                                <span className={`${styles.tips_text}  ${styles.desc_buZhou}`}>></span>
                            </Row>
                            <Row>
                            </Row>
                        </Col>
                        <Col span={5}>
                            <Row>
                                <span className={`${styles.desc_buZhou}`}>3</span>
                            </Row>
                            <Row>
                                <span className={`${styles.desc_buZhou}`}>获得会员奖励</span>
                            </Row>
                        </Col>
                    </Row>

                    <div>
                        <Button onClick={gotoRegister} className={`${styles.dcc_bg_gradient}`} type="primary" size="large" htmlType="submit">
                            前往平台领取
                        </Button>
                    </div>

                </div>
            </div>

            <div className={styles.qv}>
                <p className={styles.qv_q}>Q:如何领取会员体验卡？</p>
                <p className={styles.qv_a}>A:通过您好友分享的链接注册之后进入解决方案平台，且完成一次对话后，即可获得会员体验卡。</p>
                <Divider/>
                <p className={styles.qv_q}>Q：最多可以领取几天会员体验卡？</p>
                <p className={styles.qv_a}>A:您可以通过好友邀请链接领取5天会员体验卡；您也可以通过您的专属邀请链接邀请好友，最多可得320天会员体验卡！</p>
                <Divider/>
                <p className={styles.qv_q}>Q：为什么提示我无法领取会员体验卡？</p>
                <p className={styles.qv_a}>A:以下情况会导致您无法领取会员体验卡：您已领取过该活动的体验卡；您和邀请您的好友互为邀请人；您领取的是自己邀请链接的体验卡。</p>
            </div>

            <br/><br/><br/>
        </div>
    )
};

export default Invited;
